<template>
  <div>
    <div class="header">
      <div class="my-container">
        <!-- 已登录的dom结构 -->
        <div class="loginin" v-if="$store.state.token">
          <!-- 用户头像 -->
          <div class="logintop">
            <van-image class="img" :src="userinfo.photo" />
            <div class="loginname">{{ userinfo.name }}</div>
            <van-button
              to="/useredit"
              class="loginbtn"
              size="mini"
              type="primary"
              >编辑资料</van-button
            >
          </div>
          <!-- 数据统计 -->
          <div class="datalist">
            <div class="item">
              <div>{{ userinfo.art_count }}</div>
              <div>头条</div>
            </div>
            <div class="item">
              <div>{{ userinfo.follow_count }}</div>
              <div>关注</div>
            </div>
            <div class="item">
              <div>{{ userinfo.fans_count }}</div>
              <div>粉丝</div>
            </div>
            <div class="item">
              <div>{{ userinfo.like_count }}</div>
              <div>获赞</div>
            </div>
          </div>
        </div>
        <!-- 未登录的dom结构 -->
        <div class="outlogin" v-else @click="loginFn">
          <img src="@/assets/img/mobile.png" alt="" />
          <div class="text">登录/注册</div>
        </div>
      </div>
    </div>
    <van-grid :column-num="2">
      <van-grid-item class="columnitem">
        <template #icon>
          <span class="toutiao toutiao-shoucang"></span>
        </template>
        <template #text>
          <span class="text">收藏</span>
        </template>
      </van-grid-item>
      <van-grid-item class="columnitem">
        <template #icon>
          <span class="toutiao toutiao-lishi"></span>
        </template>
        <template #text>
          <span class="text">历史</span>
        </template>
      </van-grid-item>
    </van-grid>
    <div class="line"></div>
    <van-cell title="消息通知" is-link />
    <van-cell title="小智同学" is-link to="/chatView" />
    <div class="line"></div>
    <div class="loginout" v-if="$store.state.token" @click="loginout">
      退出登录
    </div>
  </div>
</template>
<script>
//按需 导入 getitem 获取token

import { removeItem } from "@/utils/storage";
//导入用户获取api
import { getUserApi } from "@/api/user";

export default {
  data() {
    return {
      userinfo: {},
      // loginstate: getItem("token"),
    };
  },
  async created() {
    try {
      //解构一下
      let { data } = await getUserApi();

      this.userinfo = data.data;
    } catch (error) {
      console.log(error);
    }
  },
  methods: {
    loginFn() {
      this.$router.push("/login");
    },
    //通过清除缓存 来退出登录
    //为了更好的用户友好 交互界面 加入一个请提示框 来判断用户是否真的确认退出
    loginout() {
      this.$dialog
        .confirm({
          title: "退出提示",
          message: "确定要退出登录吗？",
        })
        .then(() => {
          // on confirm
          // this.loginstate = removeItem();
          removeItem();
        })
        .catch(() => {
          // on cancel

          console.log("用户取消了退出登录操作");
        });
    },
  },
};
</script>

<style scoped lang="less">
.header {
  height: 390px;
  width: 100%;
  background: url("@/assets/img/banner.png");
  .outlogin {
    text-align: center;
    img {
      width: 132px;
      height: 132px;
      margin: 113px 0px 15px;
    }
    .text {
      font-size: 28px;
      color: #fff;
    }
  }
  .loginin {
    overflow: hidden;
    line-height: 132px;
    .logintop {
      margin-top: 80px;
      padding: 0px 32px;
      overflow: hidden;
      .img {
        width: 132px;
        height: 132px;
        border: 4px solid #fff;
        float: left;
      }
      .loginname {
        font-size: 30px;
        color: #fff;
        float: left;
        margin-left: 22px;
      }
      .loginbtn {
        width: 116px;
        height: 33px;
        background-color: #ffffff;
        border-radius: 16px;
        color: #666666;
        font-size: 20px;
        float: right;
        margin-top: 50px;
      }
    }

    .datalist {
      padding: 0px 32px;
      .item {
        width: 25%;
        float: left;
        color: #fff;
        text-align: center;
        div:first-child {
          font-size: 36px;
          line-height: 36px;
          margin: 55px 0px 18px;
        }
        div:last-child {
          font-size: 23px;
          line-height: 24px;
        }
      }
    }
  }
}
.columnitem {
  .toutiao {
    font-size: 45px;
  }
  .text {
    font-size: 28px;
    color: #333333;
    margin-top: 16px;
  }
}
.cel {
  margin: 9px 0px;
}
.loginout {
  height: 105px;
  font-size: 30px;
  letter-spacing: 2px;
  color: #d86262;
  text-align: center;
  background: #fff;
  line-height: 105px;
}
.line {
  margin: 10px 0;
}
</style>
